<template>
	<div :class="['ui-brief', isOpen && 'is_open']">
		<div class="ui-brief_normal">
			<span>
				<slot></slot>
			</span>
			<button v-show="isOpen" class="ui-brief_btn" @click="closeBrief">收起</button>
		</div>
		<div class="ui-brief_float">
			<template v-if="ellipsis == 'center'">
				<span class="ui-brief_ctx-center">
					<slot></slot>
				</span>
				<span class="ui-brief_ctx-center">
					<slot></slot>
				</span>
			</template>
			<span v-else class="ui-brief_ctx-after">
				<slot></slot>
			</span>
			<button class="ui-brief_btn" @click="openBrief">更多</button>
		</div>
	</div>
</template>

<script setup>
	
	import { defineComponent, ref, watch, computed, onMounted } from 'vue';
	
	const props = defineProps({
		ellipsis: {
			type: String,
			default: 'after',
			validator: v => ['center', 'after'].includes(v)
		}
	})
	
	const emits = defineEmits(['open', 'close']);
	
	const isOpen = ref(false);
	
	function openBrief() {
		isOpen.value = true;
		emits('open');
	}
	
	function closeBrief() {
		isOpen.value = false;
		emits('close');
	}
	
</script>

<style lang="scss" scoped>
	
	.ui-brief {
		line-height: 1.5em;
		overflow: hidden;
		background: #ffffff;
		word-break: break-all;
		&.is_open {
			.ui-brief_float {
				display: none;
			}
		}
		&:not(.is_open) {
			height: 1.5em;
			.ui-brief_normal {
				max-height: 200%;
			}
			.ui-brief_float {
				display: flex;
				align-items: center;
			}
		}
	}
	.ui-brief_float {
		background: inherit;
		transform: translateY(-3em);
		height: 100%;
		@mixin ctx {
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			height: 100%;
		}
		.ui-brief_ctx-center {
			@include ctx;
			&:nth-child(2) {
				white-space: nowrap;
				direction: rtl;
			}
		}
		.ui-brief_ctx-after {
			white-space: nowrap;
			@include ctx;
		}
	}
	.ui-brief_btn {
		cursor: pointer;
		border: none;
		outline: none;
		background: transparent;
		padding: 0;
		margin-left: .5em;
		color: #409eff;
	}
	
</style>